<#import "/layout/mainLayout.html" as mainLayout />

<#macro mainheading>

    <!--<link href="/plugins/Cropper/css/normalize.css" rel="stylesheet" />-->
    <!--<link href="/plugins/Cropper/css/default.css" rel="stylesheet" />-->
    <link href="/plugins/Cropper/css/main.css" rel="stylesheet" />
    <link href="/plugins/Cropper/dist/cropper.css" rel="stylesheet" />

</#macro>
<#assign mainheading = mainheading in mainLayout />


<#macro maincontent>

    <div class="row">
        <div class="table-wrapper products-table section">
            <div class="row-fluid head">
                <!--<div class="span12">-->
                <!--<h4>修改头像</h4>-->
                <!--</div>-->
                <!-- begin modifyUserPhotoDiv -->
                <div id="modifyUserPhotoDiv">
                    <!-- Content -->
                    <div class="container" style="padding-left:10px;padding-right: 10px; ">
                        <div class="row">
                            <div class="span9" style="margin-left: 10px;margin-right: 10px;">
                                <!-- <h3 class="page-header">Demo:</h3> -->
                                <div class="img-container">
                                    <img  src="${userbaseinfo.fPhoto}" alt="Picture" />
                                </div>
                            </div>
                            <div class="row" style="margin-left: 60px;">
                                <!-- <h3 class="page-header">Preview:</h3> -->
                                <div class="docs-preview clearfix">
                                    <div class="img-preview preview-lg"></div>
                                    <div class="img-preview preview-md"></div>
                                    <div class="img-preview preview-sm"></div>
                                    <div class="img-preview preview-xs"></div>
                                </div>

                                <!-- <h3 class="page-header">option</h3> -->
                                <div class="docs-data" style="margin-bottom:1px;">
                                    <div class="input-group">
                                        <!-- -->
                                        <div class="btn-group">
                                            <button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="移动">
                                            <span class="icon icon-move"></span>
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="setDragMode" data-option="crop" type="button" title="Crop">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="裁剪">
                                            <span class="icon icon-crop"></span>
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="放大">
                                            <span class="icon icon-zoom-in"></span>
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="缩小">
                                            <span class="icon icon-zoom-out"></span>
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button" title="Rotate Left">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="向左旋转45度">
                                            <span class="icon icon-rotate-left"></span>
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="rotate" data-option="45" type="button" title="Rotate Right">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="向右旋转45度">
                                            <span class="icon icon-rotate-right"></span>
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="reset" type="button" title="Reset">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="还原">
                                            <span class="icon icon-refresh"></span>
                                        </span>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="input-group">
                                        <div class="btn-group " data-toggle="buttons">
                                            <button class="btn btn-primary" data-method="setAspectRatio" data-option="1" type="button" title="固定比例：1 / 1">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例：1 / 1">
                                            1:1
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666" type="button" title="固定比例：1 / 1">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例： 2 / 3">
                                            2:3
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" type="button" title="Rotate Right">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例：4 / 3">
                                            4:3
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="setAspectRatio" data-option="1.7777777777777777" type="button" title="Rotate Right">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="固定比例：16 / 9">
                                            16:9
                                        </span>
                                            </button>
                                            <button class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" type="button" title="自由比例">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="自由比例">
                                            自由比例
                                        </span>
                                            </button>

                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <div class="btn-group">
                                            <input name="uploadify" id="inputImage" type="file" style="display:none">
                                            <div class="input-append" title="选择本地文件">
                                                <input id="photoCover" class="span8" type="text" disabled="disabled" style="display:none">
                                                <a class="btn btn-primary" onclick="$('input[id=inputImage]').click();"><b>选择本地图片</b></a>
                                                <div class="btn btn-primary" title="上传头像" onclick="savePhoto()"><b>上传头像</b></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input-group">

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <!-- end modifyUserPhotoDiv -->
            <div>
            </div>
        </div>
    </div>

</#macro>
<#assign maincontent = maincontent in mainLayout />

<#macro mainfooter>
    <script src="/js/jquery/jquery.knob.js"></script>
    <script src="/js/mortise/photoCompressSize.js"></script>
    <script src="/plugins/Cropper/dist/cropper.js"></script>
    <script src="/plugins/Cropper/main.js"></script>
    <script type="text/javascript">
        function savePhoto() {

            var _canvas = imageOperatorV2.imageCropper.ResultImageCanvas();
            var _canvas_temp = photoCompressSize(_canvas);
            var quality = 1.0;
            var data = "";
            try{
                data = _canvas_temp.toDataURL("image/jpeg", quality);
            }catch (ex){

            }
            if(!data||data==""){
                data = _canvas.toDataURL("image/jpeg", quality);
            }
            var b64 = data.substring(23);
            console.log(b64.length);
            $.post("/api/user/modifyUserPhoto", { data: b64 }, function (data) {
                if(mortise_layout.ValidataResult(data)){
                    if(data.code=="OperateOk"){
                        dialog({
                            title: '修改成功',
                            content: '头像修改成功！',
                            quickClose: true,
                        }).showModal();
                        mortise_layout.getMe();
                    }else{
                        dialog({
                            title: '修改失败',
                            content: '头像修改失败！',
                            quickClose: true,
                        }).showModal();
                    }

                }

            });
        }
        $(function () {
            var aaa = $('button[data-method="setAspectRatio"]');
            $(aaa).click(function (sender) {
                $(aaa).each(function () {
                    $(this).removeClass("active");
                });
                $(sender).addClass("active");
            });
            $('input[id=inputImage]').change(function () {
                $('#photoCover').val($(this).val());
            });
        });

    </script>
</#macro>
<#assign mainfooter = mainfooter in mainLayout />
<@mainLayout.page title="修改我的头像"/>